<script setup>
import { tool } from "../../tool/index"
import { inject, onMounted, ref } from "vue"
import { useRouter } from "vue-router"
import { ElMessage, ElMessageBox } from 'element-plus'
// API 地址
const imageUrl = tool.serverPath + "api/app_api/image/download?fileName="
// 初始化数据
const router = useRouter()
const store = inject('store')
const user = store.state.user
const Blog = ref({})
const count = ref(0)
const limit = ref(10)
const offset = ref(1)
const author_key = ref(["title", "label_1", "label_2", "label_3", "label_4", "label_5"])
const author_title = ref("")
// 查询文章
async function SearchBlog(value) {
  try {
    const data = {
      key: "Search",
      columns: ["id", "title", "image", "like_count", "created_at", "updated_at"],
      order: [["created_at", "desc"]],
      limit: limit.value,
      offset: offset.value,
      data: value,
      Or: true
    }
    const GetBlog = await tool.axiosApi("article", data, "get")
    Blog.value.data = GetBlog.data
    count.value = GetBlog.count
    window.scrollTo(0, 0)
  } catch (error) {

  }
}
// 跳转 编辑 页面
function gotoBlog(value) {
  router.push({ name: 'BlogPublishing', params: { BlogId: value } })
}
// 跳转 内容 页面
function GotoContent(value) {
  router.push({ name: 'BlogContent', params: { BlogId: value.id } })
}
function ButtonSearchBlog() {
  const author = ref({
    Or: true,
    key: author_key.value,
    value: [author_title.value],
    And: [
      { "author_id": user.id }
    ],
    OpLike: true
  })
  SearchBlog(author.value)
}
// 分页操作
function handlePageChange(value) {
  offset.value = value
  ButtonSearchBlog()
}

async function articleDelete(id){
  await ElMessageBox.alert('确认删除？此操作无法撤销', {
    confirmButtonText: '确认删除',
  }).then(async () => {
    const response = await tool.dataDelete("article",{
      key:"id",
      value:id
    })
    if(response){
      ElMessage({
      type:"success",
      message:"删除成功"
    })
    ButtonSearchBlog()
    }else{
      ElMessage({
      type:"info",
      message:"删除出错啦"
    })
    }
  })
}
// 初始化数据
onMounted(() => {
  ButtonSearchBlog()
})
</script>

<template>
  <div class="search">
    <el-row :gutter="5">
      <el-col :span="20">
        <el-input v-model="author_title" placeholder="输入需要查询的文章" :prefix-icon="Search" />
      </el-col>
      <el-col :span="4">
        <el-button @click="ButtonSearchBlog()" type="primary">确认查询</el-button>
      </el-col>
    </el-row>
  </div>

  <el-table @cell-click="GotoContent" class="table" table-layout="auto" :data="Blog.data">
    <el-table-column label="封面" width="180" header-align="center">
      <template #default="scope">
        <el-image v-if="scope.row.image" class="image" fit="cover" :src="imageUrl + scope.row.image">
        </el-image>
        <el-empty v-else :image-size="50" description="未添加封面" />
      </template>
    </el-table-column>
    <el-table-column prop="title" label="标题" width="300" header-align="center" align="center" />
    <el-table-column prop="like_count" label="点赞数" header-align="center" align="center" />
    <el-table-column prop="created_at" label="发表时间" header-align="center" align="center" />
    <el-table-column prop="updated_at" label="更新时间" header-align="center" align="center" />
    <el-table-column align="center">
      <template #default="{ row }">
        <el-button @click="gotoBlog(row.id)" type="text">编辑</el-button>
      </template>
    </el-table-column>
    <el-table-column  align="center">
      <template #default="{ row }">
        <el-button  @click.stop="articleDelete(row.id)"  type="text">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="pagination">
    <el-pagination background :page-size="limit" :pager-count="11" layout="prev, pager, next" :total="count"
      @current-change="handlePageChange" />
  </div>
</template>

<style scoped>
.search {
  margin-bottom: 20px;
  width: 40%;
}

.table .el-image {
  height: 100px;
  width: 200px;
  border-radius: 10px;
}

.pagination {
  width: 100%;
  height: 30px;
  margin-top: 15px;
}

.pagination .el-pagination {
  float: right;
}
</style>
